<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true"><block slot="content">我的收藏</block></cu-custom>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" height="100%" top="20" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
			<view class="cu-list menu-avatar">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in collectionList" :key="index"
					@touchstart="ListTouchStart" @touchmove="ListTouchMove"
					@touchend="ListTouchEnd" :data-target="'move-box-' + index" 
					style="min-height: 220rpx;">
					<view class="flex padding-left padding-right" style="width: 100%;">
						<view class="bg-img radius goodsImg" :style="'background-image:url('+item.goods_img+');'"></view>
						<view class="flex margin-left justify-between" style="display: flex;flex-direction: column;width: 450rpx;">
							<view class="text-df" style="line-height:40upx;">
								{{item.goods_name}}
							</view>
							<view class="flex-1"></view>
							<view class="flex flex-1 align-center jusity-between" style="width: 100%;height: 100%;">
								<view class="">
									<text class="text-theme text-df" v-if="item.goods_price">￥{{item.goods_price | formatPrice}}</text>
									<text class="text-999 text-xs wq-linethrough margin-left-sm" v-if="item.goods_mktprice">￥{{item.goods_mktprice | formatPrice}}</text>
								</view>
								<view style="flex:1;"></view>
								<view class="cu-btn line-theme" @tap="gobuy(item)">去购买</view>
							</view>
						</view>
					</view>
					<view class="move" @tap="DEL_Collectiont(item.goods_id)">
						<view class="bg-red">删除</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import * as User_API from '@/api/user.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js"
	export default {
		mixins: [MescrollMixin,MescrollMoreItemMixin], 
		data() {
			return {
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
				collectionList:[],
				params:{
					page_no:1,
					page_size:10,
					seller_id:uni.getStorageSync('shop').shop_id 
				},
				downOption:{
					auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption:{
					auto:false,
					noMoreSize: 8, //列表的总数量要大于半页才显示无更多数据;默认5
					empty:{
						icon:'/static/images/empty/empty_collection.png',
						tip: '没商品数据'
					}
				},
			};
		},
		methods:{
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart> 0 ? 'right' : 'left'
			},
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			DEL_Collectiont(id){
				User_API.delCollectionGood(id).then(res =>{
					this.params.page_no = 1
					this.GET_CollectionList()
				})
			},
			downCallback(page) {
				// console.log('123page',page)
				this.params.page_no = 1
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.GET_CollectionList()
			},
			GET_CollectionList(){
				User_API.getCollectionList(this.params).then(res =>{
					this.mescroll.endSuccess(res.data.length)
					if(this.params.page_no ==1) this.collectionList = []
					this.collectionList = this.collectionList.concat(res.data)
					this.params.page_no+=1
				}).catch(()=>{
					this.mescroll.endErr();
				})
			},
			//点击空布局按钮的回调
			emptyClick(){
				uni.showToast({
					title:'点击了按钮,具体逻辑自行实现'
				})
			},
			gobuy(goods){
				uni.redirectTo({
					url:'../goods/index?goods_id='+goods.goods_id
				})
			}
		}
	}
</script>

<style lang="scss">
/deep/.cu-btn {
	height: 50rpx;
	border-radius: 24rpx;
}
</style>
